<template>
  <div style="height: 100%">
    <Header title="年卡激活" :back="true" />
    <div class="activation_wrap">
      <div class="bg">
        <img src="@/assets/images/index/signedscenicspots_bg.png" alt="" />
      </div>
      <div class="content">
        <div class="form">
          <van-form @submit="onSubmit" ref="formRef">
            <van-cell-group inset>
              <van-field
                v-model="form.activateCode"
                required
                name="activateCode"
                label="激活码"
                placeholder="请输入激活码"
                :rules="[{ required: true, message: '请填写激活码' }]"
                input-align="right"
                error-message-align="right"
              />

              <van-field
                v-model="form.phone"
                required
                name="phone"
                label="手机号"
                type="tel"
                placeholder="请输入手机号"
                input-align="right"
                error-message-align="right"
                :rules="[
                  { required: true, validator: chenkIsValidPhoneNumber },
                ]"
              />

              <van-field
                v-model="form.name"
                required
                name="name"
                label="姓名"
                placeholder="请输入姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
                input-align="right"
                error-message-align="right"
              />

              <van-field
                v-model="form.idCardNo"
                required
                name="idCardNo"
                label="证件号码"
                placeholder="请输入证件号码"
                input-align="right"
                error-message-align="right"
                :rules="[
                  { required: true, message: '请输入证件号码' },
                  { validator: validatorIsValidChineseID },
                ]"
              />

              <van-field
                class="upload"
                required
                name="privatePhoto"
                right
                label="个人照片"
                input-align="right"
                :rules="[{ required: true, message: '请上传个人照片' }]"
              >
                <template #input>
                  <van-uploader
                    v-model="form.privatePhoto"
                    :after-read="upload"
                    accept=".jpg,.jpeg,.png"
                    max-count="1"
                  />
                </template>
              </van-field>
            </van-cell-group>
            <div class="hint">
              <span class="mark">!</span
              >如果系统提示重复开通，请到我的年卡中续费
            </div>
            <div class="desc">
              年卡一人一卡，激活必须与个人信息绑定，请先阅读下方的用户协议和隐私协议并勾选同意后才能继续激活
            </div>

            <van-field name="checked" label="" class="checkbox">
              <template #input>
                <van-checkbox v-model="form.checked" shape="square" />
                <span class="agreement_wrap"
                  >我已仔细阅读并同意<span
                    class="agreement"
                    @click="openUserAgreement = true"
                    >用户协议</span
                  >和<span class="agreement" @click="openPrivacyPolicy = true"
                    >隐私条款</span
                  ></span
                >
              </template>
            </van-field>
            <div class="button_box">
              <van-button round block type="primary" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <!-- 用户协议 -->
    <UserAgreement v-if="openUserAgreement" @cancel="() => close(1)" />
    <!-- 隐私协议 -->
    <PrivacyPolicy v-if="openPrivacyPolicy" @cancel="() => close(2)" />
  </div>
</template>


<script setup>
import { ref, reactive } from "vue";
import UserAgreement from "@/components/agreement/UserAgreement.vue";
import PrivacyPolicy from "@/components/agreement/PrivacyPolicy.vue";

import api from "@/api/index.js";
import { isValidChineseID, isValidPhoneNumber } from "@/utils/check.js";
import { showDialog } from "vant";
import { useRouter, useRoute } from "vue-router";

const loading = ref(false);
const router = useRouter();
const route = useRoute();
const openUserAgreement = ref(false);
const openPrivacyPolicy = ref(false);

const close = (type) => {
  if (type === 1) {
    openUserAgreement.value = false;
  } else {
    openPrivacyPolicy.value = false;
  }
};

const form = reactive({
  name: "",
  idCardNo: "",
  phone: "",
  privatePhoto: [],
  activateCode: route.query?.activateCode ? route.query?.activateCode : "",
  checked: false,
});
const currentPhone = ref("");
const onSubmit = async (values) => {
  console.log(values);
  loading.value = true;
  let sendData = {
    name: form.name,
    idCardNo: form.idCardNo,
    phone: form.phone,
    privatePhoto: currentPhone.value,
    activateCode: form.activateCode,
  };
  if (!form.checked) return showDialog({ message: "请先阅读协议并同意！" });
  let { code, data } = await api.getCardActivate(sendData);
  if (code == 200) router.push("/my-card");
  loading.value = true;
};

const chenkIsValidPhoneNumber = (phone) => {
  if (!phone) {
    return "请输入手机号";
  }

  if (isValidPhoneNumber(phone)) {
    return true;
  }
  return "请输入正确的手机号";
};

const validatorIsValidChineseID = (ID) => {
  if (isValidChineseID(ID)) {
    return true;
  }
  return "请输入正确的身份证号码";
};

const upload = async (file) => {
  let formData = new FormData();
  formData.append("file", file.file);
  let { code, data } = await api.getFileUpload(formData);
  if (code == 200) currentPhone.value = data;
  else form.privatePhoto = [];
};
</script>



<style lang="scss" scoped>
.activation_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  .bg {
    position: absolute;
    z-index: -1;
    background: linear-gradient(
      rgba(142, 220, 188, 1),
      rgba(225, 225, 225, 0.2)
    );
  }
  .content {
    height: 100%;
  }
  .form {
    position: relative;
    height: 100%;
    width: 95%;
    margin: 0 auto;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
    // border: 1px solid rgba(151, 151, 151, 1);
    box-shadow: 2px 2px 6px rgba(189, 189, 189, 0.7);
    margin-top: 13px;
    :deep(.van-cell-group--inset) {
      margin: 0;
    }
    .van-cell-group,
    .van-cell {
      background: transparent;
    }
    .upload :deep(.van-field__label) {
      line-height: 88px;
    }
    .van-cell {
      border-bottom: 0.5px solid rgba(222, 222, 222, 1);
    }
    .hint {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 16.46px;
      color: rgba(240, 36, 36, 1);
      text-align: left;
      padding: 10px 30px 5px;
      position: relative;

      .mark {
        position: absolute;
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 7px;
        border: 1px solid rgba(240, 36, 36, 1);
        left: 12px;
        line-height: 14px;
        text-align: center;
        padding: 0;
      }
    }
    .desc {
      padding: 0 14px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 19.21px;
      color: rgba(139, 139, 139, 1);
      text-align: left;
      vertical-align: top;
    }
    .checkbox {
      border: 0px;
    }
    .agreement_wrap {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 19px;
      color: rgba(139, 139, 139, 1);
      padding-left: 5px;
      .agreement {
        text-decoration-line: underline;
        color: rgba(241, 46, 46, 1);
      }
    }
    .button_box {
      width: 80%;
      position: fixed;
      bottom: 40px;
      left: 10%;
      height: 34px;
      .button {
        border-radius: 5px;
        background: rgba(79, 172, 145, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 34px;
        line-height: 34px;
        left: 109px;
        font-size: 20px;
        letter-spacing: 0px;
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>